<template>
    <div>
        <el-radio-group v-model="isToday" style="margin-bottom: 20px; height: 40px" @change="queryChange">
            <el-radio-button :label="false" size="mini">历史</el-radio-button>
            <el-radio-button :label="true" size="mini">当天</el-radio-button>
        </el-radio-group>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="registerNo" label="编号" width="150">
            </el-table-column>
            <el-table-column prop="patient.patientName" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="registerDate" label="预约日期" width="120">
            </el-table-column>
            <el-table-column prop="registerTime" label="时间段" width="120">
            </el-table-column>
            <el-table-column prop="dept.deptName" label="挂号科室" width="120">
            </el-table-column>
            <el-table-column prop="physician.realName" label="挂号医生" width="120">
            </el-table-column>
            <el-table-column prop="price" label="挂号费" width="120">
            </el-table-column>
            <el-table-column prop="sort" label="序号" width="120">
            </el-table-column>
            <el-table-column label="状态" width="120">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status != 0 ? 'info' : ''">{{ scope.row.status | statusFilter }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status == 0" type="primary" size="mini" @click="openCaseDrawer(scope.row)"
                        round>就诊</el-button>
                    <el-button v-else type="info" size="mini" @click="openCaseDrawer(scope.row)" round>查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.pageNum"
            :page-sizes="[5, 10, 15, 20]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 抽屉 -->
        <el-drawer :title="rowData.status == 0 ? '填写病例' : '查看病例'" :visible.sync="caseDrawer" size="50%"
            :before-close="rowData.status == 0 ? handleClose : handleEchoClose">
            <div>
                <el-form :model="caseForm">
                    <el-form-item label="病人姓名" :label-width="formLabelWidth">
                        <el-input v-model="rowData.patient.patientName" :disabled="true" autocomplete="off"
                            style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="体温" :label-width="formLabelWidth">
                        <el-slider v-model="caseForm.temperature" :step="0.1" :min="35" :max="45" :marks="marks"
                            :disabled="rowData.status == 0 ? false : true" style="width: 300px;">
                        </el-slider>
                    </el-form-item>
                    <el-form-item label="诊断结果" :label-width="formLabelWidth">
                        <el-input v-model="caseForm.result" maxlength="10" :disabled="rowData.status == 0 ? false : true"
                            type="textarea" placeholder="请输入内容" show-word-limit style="width: 300px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="医嘱" :label-width="formLabelWidth">
                        <el-input v-model="caseForm.advice" maxlength="30" :disabled="rowData.status == 0 ? false : true"
                            type="textarea" placeholder="请输入内容" show-word-limit style="width: 300px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="科室" :label-width="formLabelWidth">
                        <el-input v-model="rowData.dept.deptName" autocomplete="off" :disabled="true"
                            style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="医生" :label-width="formLabelWidth">
                        <el-input v-model="rowData.physician.realName" autocomplete="off" :disabled="true"
                            style="width: 300px;"></el-input>
                    </el-form-item>
                </el-form>

                <div v-if="rowData.status == 0">
                    <el-button @click="medicineSaveUI" type="warning" round size="small"
                        style="margin-left: 95px;">添加医嘱</el-button>
                    <el-button @click="checkSaveUI" type="success" round size="small">检查申请</el-button>
                    <el-button @click="operationSaveUI" type="danger" round size="small">手术申请</el-button><br /><br><br>
                    <el-button @click="cancelForm" style="margin-left: 40px;">取 消</el-button>
                    <el-button type="primary" @click="caseSave">提交</el-button>
                </div>

                <el-drawer title="添加医嘱" :append-to-body="true" :before-close="handleInnerClose"
                    :visible.sync="medicineDrawer">
                    <div>
                        <el-form :model="medicineForm">
                            <el-form-item label="病人姓名" :label-width="formLabelWidth">
                                <el-input v-model="rowData.patient.patientName" :disabled="true" autocomplete="off"
                                    style="width: 300px;"></el-input>
                            </el-form-item>

                            <el-form-item label="用药类型" :label-width="formLabelWidth">
                                <el-select v-model="medicineForm.useMedicineType" placeholder="请选择" style="width: 300px;">
                                    <el-option v-for="item in useMedicineType" :key="item" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="药品" :label-width="formLabelWidth">
                                <el-autocomplete class="inline-input" v-model="medicineForm.medicineName" ref="medicines"
                                    :fetch-suggestions="medicineQuerySearch" placeholder="请输入内容" style="width: 300px;"
                                    @select="medicineHandleSelect" @change="medicineHandleChange">
                                    <template slot-scope="{ item }">
                                        <div class="name">{{ item.medicineName }}</div>
                                    </template>
                                </el-autocomplete>
                            </el-form-item>

                            <el-form-item label="单价" :label-width="formLabelWidth">
                                <el-input v-model="medicineForm.price" :disabled="true" autocomplete="off"
                                    style="width: 300px;"></el-input>
                            </el-form-item>

                            <el-form-item label="数量" :label-width="formLabelWidth">
                                <el-input-number v-model="medicineForm.count" controls-position="right"
                                    @change="handleMedicineCountChange" :min="1" :max="10"></el-input-number>
                            </el-form-item>

                            <el-form-item label="总价" :label-width="formLabelWidth">
                                <el-input v-model="medicineForm.totalPrice" :disabled="true" autocomplete="off"
                                    style="width: 300px;"></el-input>
                            </el-form-item>

                            <el-form-item label="医生" :label-width="formLabelWidth">
                                <el-input v-model="rowData.physician.realName" autocomplete="off" :disabled="true"
                                    style="width: 300px;"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button @click="cancelInnerForm" style="margin: 20px 0 0 40px;">取 消</el-button>
                        <el-button type="primary" @click="medicineSave">添加医嘱</el-button>
                    </div>
                </el-drawer>
                <!-- 检查申请表单 -->
                <el-drawer title="检查申请" :append-to-body="true" :before-close="handleInnerClose" :visible.sync="checkDrawer">
                    <div>
                        <el-form :model="checkForm">
                            <el-form-item label="病人姓名" :label-width="formLabelWidth">
                                <el-input v-model="rowData.patient.patientName" :disabled="true" autocomplete="off"
                                    style="width: 300px;"></el-input>
                            </el-form-item>

                            <el-form-item label="检查项目" :label-width="formLabelWidth">
                                <el-autocomplete class="inline-input" v-model="checkForm.checkName" ref="checks"
                                    :fetch-suggestions="checkQuerySearch" placeholder="请输入内容" style="width: 300px;"
                                    @select="checkHandleSelect" @change="checkHandleChange">
                                    <template slot-scope="{ item }">
                                        <div class="name">{{ item.checkName }}</div>
                                    </template>
                                </el-autocomplete>
                            </el-form-item>

                            <el-form-item label="价格" :label-width="formLabelWidth">
                                <el-input v-model="checkForm.price" :disabled="true" autocomplete="off"
                                    style="width: 300px;"></el-input>
                            </el-form-item>

                            <el-form-item label="医生" :label-width="formLabelWidth">
                                <el-input v-model="rowData.physician.realName" autocomplete="off" :disabled="true"
                                    style="width: 300px;"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button @click="cancelInnerForm">取 消</el-button>
                        <el-button type="primary" @click="checkSave">检查申请</el-button>
                    </div>
                </el-drawer>
                <!-- 手术申请表单 -->
                <el-drawer title="手术申请" :append-to-body="true" :before-close="handleInnerClose"
                    :visible.sync="operationDrawer">
                    <div>
                        <el-form :model="operationForm">
                            <el-form-item label="病人姓名" :label-width="formLabelWidth">
                                <el-input v-model="rowData.patient.patientName" :disabled="true" autocomplete="off"
                                    style="width: 300px;"></el-input>
                            </el-form-item>

                            <el-form-item label="手术" :label-width="formLabelWidth">
                                <el-cascader v-model="operationForm.operationId" :options="operationList"
                                    :props="{ value: 'operationId', label: 'operationName', emitPath: false }"
                                    @change="handleOperationChange" style="width: 300px;">
                                </el-cascader>
                            </el-form-item>

                            <el-form-item label="价格" :label-width="formLabelWidth">
                                <el-input v-model="operationForm.price" :disabled="true" autocomplete="off"
                                    style="width: 300px;"></el-input>
                            </el-form-item>

                            <el-form-item label="医生" :label-width="formLabelWidth">
                                <el-input v-model="rowData.physician.realName" autocomplete="off" :disabled="true"
                                    style="width: 300px;"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button @click="cancelInnerForm">取 消</el-button>
                        <el-button type="primary" @click="patientOperationSave">手术申请</el-button>
                    </div>
                </el-drawer>
            </div>
        </el-drawer>

    </div>
</template>
<script>
import { registerLoad } from '@/api/register/register.js';
import { caseSave, getCase } from '@/api/caseHistory/caseHistory.js'
import { medicineLoad, useMedicineTypeLoad } from '@/api/medicine/medicine.js'
import { patientMedicineSave } from '@/api/patientMedicine/patientMedicine.js'
import { checkLoad } from '@/api/check/check.js'
import { patientCheckSave } from '@/api/patientCheck/patientCheck.js'
import { operationLoad } from '@/api/operation/operation.js'
import { patientOperationSave } from '@/api/patientOperation/patientOperation.js'

export default {

    data() {
        return {
            tableData: [],
            rowData: {
                patient: {},
                dept: {},
                physician: {}
            },
            query: {
                pageNum: 1,
                pageSize: 5,
                isToday: true
            },
            total: 0,
            caseDrawer: false,
            medicineDrawer: false,
            checkDrawer: false,
            operationDrawer: false,
            caseForm: {},
            medicineForm: { count: 1 },
            checkForm: {},
            operationForm: {},
            formLabelWidth: '80px',
            marks: {
                37: '37°C',
            },
            useMedicineType: [],
            medicineList: [],
            checkList: [],
            operationList: [],
            isToday: true
        }
    },
    filters: {
        statusFilter(val) {
            if (val == 0) {
                return "未就诊"
            }
            return "已就诊"
        }
    },
    mounted() {
        this.registerLoad();
        this.useMedicineTypeLoad();
        this.medicineLoad();
        this.checkLoad();
        this.operationLoad();
    },
    methods: {
        /* 挂号列表 */
        registerLoad() {
            registerLoad(this.query).then(r => {
                this.tableData = r.data.list
                this.total = r.data.total
                this.query.pageNum = r.data.pageNum
                this.query.pageSize = r.data.pageSize
            })
        },
        /* 分页 */
        handleSizeChange(val) {
            this.query.pageSize = val
            this.registerLoad();
        },
        handleCurrentChange(val) {
            this.query.pageNum = val
            this.registerLoad();
        },
        /* 病例抽屉UI */
        openCaseDrawer(row) {
            this.rowData = JSON.parse(JSON.stringify(row));
            this.caseDrawer = true
            if (row.status != 0) {
                getCase(row.registerNo).then(r => {
                    this.caseForm = r.data;
                    return;
                })
            }
            this.caseForm = {};
            this.caseForm.patientId = this.rowData.patientId;
            this.caseForm.deptId = this.rowData.deptId;
            this.caseForm.doctor = this.rowData.doctor;
            this.caseForm.registerNo = this.rowData.registerNo;

        },
        /* 关闭病例抽屉 */
        handleClose(done) {
            this.$confirm('还有未保存的工作哦确定关闭吗？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        /* 关闭内层抽屉 */
        handleInnerClose(done) {
            this.$confirm('还有未保存的工作哦确定关闭吗？')
                .then(_ => {
                    done();
                    this.medicineForm = { count: 1 };
                    this.checkForm = {};
                    this.operationForm = {};
                })
                .catch(_ => { });
        },
        /* 查看病例快速关闭抽屉 */
        handleEchoClose(done) {
            done();
        },
        /* 病例取消 */
        cancelForm() {
            this.caseForm = {}
            this.caseDrawer = false;
        },
        /* 内部取消 */
        cancelInnerForm() {
            this.medicineForm = { count: 1 };
            this.checkForm = {};
            this.operationForm = {};
            this.medicineDrawer = false;
            this.checkDrawer = false;
            this.operationDrawer = false;
        },
        /* 病例提交 */
        caseSave() {
            caseSave(this.caseForm).then(r => {
                if (r.code == 200) {
                    this.$message.success("保存成功");
                    this.caseDrawer = false;
                    this.registerLoad();
                    return;
                }
                this.$message.error("保存失败");
            })
        },
        /* 药物UI */
        medicineSaveUI() {
            this.medicineForm.patientId = this.rowData.patientId;
            this.medicineForm.doctor = this.rowData.doctor;
            this.medicineDrawer = true
        },
        /* 用药类型加载 */
        useMedicineTypeLoad() {
            useMedicineTypeLoad().then(r => {
                this.useMedicineType = r.data
            })
        },
        /* 药品加载 */
        medicineLoad() {
            medicineLoad().then(r => {
                this.medicineList = r.data
            })
        },
        /* 搜索建议 */
        medicineQuerySearch(queryString, cb) {
            var medicineList = this.medicineList;
            var results = queryString ? medicineList.filter(this.medicineCreateFilter(queryString)) : medicineList;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        /* 建议模糊查询 */
        medicineCreateFilter(queryString) {
            return (medicine) => {
                return (medicine.medicineName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        /* 选择建议 */
        medicineHandleSelect(item) {
            this.medicineForm.medicineName = item.medicineName
            this.medicineForm.medicineId = item.medicineId
            this.medicineForm.price = item.medicinePrice
            this.medicineForm.totalPrice = item.medicinePrice
        },
        /* 验证药品是否存在 */
        medicineHandleChange() {
            let isExist = this.medicineList.find(r => r.medicineName == this.$refs.medicines.value)
            if (!isExist) {
                this.$message.error("不存在该药")
                this.medicineForm.price = 0
                this.medicineForm.medicineId = -1
                this.$forceUpdate()
                return;
            }
            this.medicineForm.medicineId = isExist.medicineId
            this.medicineForm.price = isExist.medicinePrice
            this.medicineForm.totalPrice = isExist.medicinePrice
            this.$forceUpdate()
        },
        /* 药物提交 */
        medicineSave() {
            if (this.medicineForm.medicineId == -1) {
                this.$message.error("不存在该药，请重新选择")
                return;
            }
            patientMedicineSave(this.medicineForm).then(r => {
                if (r.code == 200) {
                    this.$message.success(r.msg);
                    this.cancelInnerForm();
                    return;
                }
                this.$message.error(r.msg);
            })
        },
        handleMedicineCountChange() {
            this.medicineForm.totalPrice = this.medicineForm.price * this.medicineForm.count
        },
        checkLoad() {
            checkLoad().then(r => {
                this.checkList = r.data;
            })
        },
        checkSaveUI() {
            this.checkForm.patientId = this.rowData.patientId;
            this.checkForm.doctor = this.rowData.doctor;
            this.checkDrawer = true;
        },
        checkQuerySearch(queryString, cb) {
            let results = queryString ?
                this.checkList.filter(check => check.checkName.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
                : this.checkList
            cb(results)
        },
        checkHandleSelect(item) {
            this.checkForm.checkId = item.checkId
            this.checkForm.checkName = item.checkName
            this.checkForm.price = item.checkPrice
        },
        checkHandleChange() {
            let check = this.checkList.find(check => check.checkName == this.checkForm.checkName);
            if (!check) {
                this.$message.error("不存在此项目");
                this.checkForm.checkId = -1
                this.checkForm.price = 0
                this.$forceUpdate();
                return;
            }
            this.checkForm.checkId = check.checkId
            this.checkForm.price = check.checkPrice
            this.$forceUpdate();
        },
        checkSave() {
            if (this.checkForm.checkId == -1) {
                this.$message.error("不存在此项目，请重新选择");
                return;
            }
            patientCheckSave(this.checkForm).then(r => {
                if (r.code == 200) {
                    this.$message.success(r.msg);
                    this.cancelInnerForm()
                    return;
                }
                this.$message.error(r.msg);
            })
        },
        operationLoad() {
            operationLoad().then(r => {
                this.operationList = r.data
            })
        },
        operationSaveUI() {
            this.operationForm.patientId = this.rowData.patientId;
            this.operationForm.doctor = this.rowData.doctor;
            this.operationDrawer = true;
        },
        handleOperationChange(operationId) {
            this.getOperationPrice(operationId, this.operationList)

        },
        getOperationPrice(operationId, operationList) {
            if (!operationList) {
                return
            }
            for (let operation of operationList) {
                if (operation.operationId == operationId) {
                    this.operationForm.price = operation.operationPrice
                }
                this.getOperationPrice(operationId, operation.children)
            }
        },
        patientOperationSave() {
            patientOperationSave(this.operationForm).then(r => {
                if (r.code == 200) {
                    this.$message.success(r.msg)
                    this.cancelInnerForm();
                    return;
                }
                this.$message.error(r.msg)
            })
        },
        queryChange(){
            this.query.isToday = this.isToday;
            this.registerLoad();
        }

    }
};
</script>
<style  scoped></style>